$(function() {
    const week = ['日','一','二','三','四','五','六']
    const nodeRepos = {}
    let currentSearchEngine = 'bing'
    const searchEngineMap = {
        'bing': ['./assets/img/bing.svg', 'https://cn.bing.com?q='],
        'baidu': ['./assets/img/baidu.svg','https://www.baidu.com/s?wd='],
        'google': ['./assets/img/google.svg','https://www.google.com/search?q='],
        'sogou': ['./assets/img/sogou.svg','https://www.sogou.com/web?query=']
    }

    const init = () => {
        nodeRepos.$time = $('#time')
        nodeRepos.$date = $('#date')
        nodeRepos.$search = $('#search')
        nodeRepos.$searchInputWrapper = $('.search-input-wrapper')
        nodeRepos.$searchInput = $('.search-box input')
        nodeRepos.$searchEngineCurrent = $('.search-engine-current')
        nodeRepos.$searchEngineList = $('.engine-list')
        nodeRepos.$engineCurrent = $('.engine-current')


        document.onclick = (e) => {
            if (!nodeRepos.$engineCurrent.get(0).contains(e.target) && !nodeRepos.$searchEngineList.get(0).contains(e.target)) {
                nodeRepos.$searchEngineList.removeClass('active')
            }
        }

        nodeRepos.$searchEngineList.html(Object.keys(searchEngineMap).reduce((html, engine) => {
            return html + `<div class="search-engine"><img src=${searchEngineMap[engine][0]} alt=${engine}></div>`
        },''))

        showTime()
        bindEvent()

        setInterval(() => {
            showTime()
        }, 1000)
    }

    const bindEvent = () => {
        nodeRepos.$search.hover(function() {
            nodeRepos.$searchInputWrapper.addClass('active')
        },function() {
            if (nodeRepos.$searchInput.val().trim() == '') {
                nodeRepos.$searchInputWrapper.removeClass('active')
            }
        })
        nodeRepos.$searchInput.keyup(function(e) {
            if (e.keyCode === 13) {
                window.open(`${searchEngineMap[currentSearchEngine][1]}${e.target.value}`,'_blank')
            }
        })
        nodeRepos.$engineCurrent.click(function () {
            nodeRepos.$searchEngineList.toggleClass('active')
        })

        nodeRepos.$searchEngineList.click(function (e) {
            const target = e.target
            if (target.nodeName.toUpperCase() == 'IMG') {
                nodeRepos.$engineCurrent.find('img').prop('src', searchEngineMap[target.alt][0])
                nodeRepos.$engineCurrent.find('img').prop('alt', target.alt)
                currentSearchEngine = target.alt
            }
        })
    }

    const formatN = (n) => {
        return String(n).padStart(2, '0')
    }

    const dateTimeNow = () => {
        const date = new Date()
        return [`${date.getFullYear()}年${formatN(date.getMonth() + 1)}月${formatN(date.getDate())}日，星期${week[date.getDay()]}`,`${formatN(date.getHours())}:${formatN(date.getMinutes())}:${formatN(date.getSeconds())}`]
    }

    const showTime = () => {
        const [date, time] = dateTimeNow()
        nodeRepos.$time.text(time)
        nodeRepos.$date.text(date)
    }

    init()
})